<style type="text/css">
  body { padding-bottom:60px; }  
  .copyright, 
  .bottom-nav { display:none; }
</style>

<section class="my my-order-detail mg10">
  
  <!-- 订单状态 -->
  <div class="my-item detail-item clearfix">
    <p>订单状态：<b>{$order.orderStatusName}</b></p>
    <p>商品总价：￥{$order.goods_amount} 运费:￥{$order.shipping_fee}</p>
    <p>应付金额：<b>￥{$order['goods_amount']+$order['shipping_fee']}</b></p>
    <eq name="order.order_status" value="2"><a id="order-cancel-btn" class="order-cancel-btn" data-id="{$order.id}"></a></eq>
  </div>
  
  <!-- 订单信息 -->
  <div class="my-item detail-item clearfix content">
    <p>下单日期：{$order.create_time|date="Y-m-d H:i:s", ###}</p>
    <p>订单编号：{$order.order_id}</p>
    <p>收货人称：{$order.consignee}&nbsp;{$order.tel}</p>
    <p>
      <span class="fl">收货地址：</span>
      <span class="address-info">{$order.provinceName}&nbsp;{$order.cityName}&nbsp;{$order.areaName}&nbsp;{$order.address}</span>
    </p>
  </div>
  
  <!-- 订单商品列表 -->
  <div id="order-good" class="my-item detail-item clearfix">
    <volist name="order.orderItems" id="vo">
    <volist name="vo.items" id="vo_goodLists">
    <div class="order-good-list">
      <div class="good-image"><img src="{:getImageUrl($vo_goodLists['productPic'], 'small')}"></div>
      <div class="good-info">
        <h4>{$vo.productName}</h4>
        <p>单价:{$vo_goodLists.productPrice}&nbsp;数量:{$vo_goodLists.productNumber}&nbsp;&nbsp;<br>小计:{$vo_goodLists['productPrice']*$vo_goodLists['productNumber']}</p>
      </div>
      <eq name="order.order_status" value="5">
      <if condition="in_array($vo_goodLists['rate_status'], array(0, 2))">
      <a href="javascript:void(0)" class="btn btn-brown evaluate" data-order-id="{$order.id}" data-good-id="{$vo_goodLists.orderGoodsId}">评价</a>
      </if>
      <eq name="vo_goodLists.rate_status" value="1">
      <span href="javascript:void(0)" class="evaluate">买家已评</span>
      </eq>
      <eq name="vo_goodLists.rate_status" value="3">
      <span href="javascript:void(0)" class="evaluate">双方已评</span>
      </eq>
      </eq>
    </div>
    </volist>
    </volist>
  </div>
  
  <if condition="$order.order_status eq 4" >
  <!-- 代签收状态时查看物流 -->
  <div class="my-item detail-item clearfix">
    <a id="check-logistics" class="btn btn-brown">查看物流</a>
  </div>
  <div id="show-logistics" class="pd10"></div>
  <script type="text/javascript">
    (function(){
      // 查看物流
      var checkLogistics = document.getElementById ( "check-logistics" );
      checkLogistics.addEventListener ( "touchend", check, false );
      function check ( ) {
        GH.ajax ( "{:getExpressUrl($order['shipping_no'], $order['express_name'])}", null, function(data) {
          if ( data.data ) {
            showLogistics ( data.data );  
          } else {
            GH.showMessage( data.message );
          };
        }, "get");
      };
      function showLogistics ( data ) {
        var html = "";
        for ( var i=data.length-1; item=data[i]; i-- ) {
          html += "<p><span class='time'>" + item.time + "</span>" + item.context + "</p>";
        }
        document.getElementById( "show-logistics" ).innerHTML = html;
      };
    })();
  </script>
  </if>
  
</section>

<if condition="$order.order_status eq 2" >
<!-- 待支付时的状态  -->
<footer class="order-detail-pay pl10 pr10">
  <form action="{:U('Pay/index', 'sid='.$sid)}" method="get">
    <span>应付总额：￥{$order['goods_amount']+$order['shipping_fee']}</span>
    <input type="hidden" name="id" value="{$order.id}" />
    <button type="submit" class="btn btn-orange">立即付款</button>
  </form>
</footer>
<script type="text/javascript">
  (function(){
    // 绑定取消订单事件
    var oDelBtn = document.getElementById ( "order-cancel-btn" );
    if ( !oDelBtn ) { return; }
    oDelBtn.addEventListener ( "touchend", cancelOrderConfirm, false );
    
    // 是否确认取消订单
    function cancelOrderConfirm () {
      var _this = this;
      modal.confirm ({
        "title": "取消订单提示",
        "text": "确认要取消此订单吗？",
        "callback": function(){ cancelOrder.apply( _this ) }
      })
    };
    
    // 取消订单
    function cancelOrder() {
      var sid = {$sid},
          id = this.getAttribute ( "data-id" ),
          url = "{:U('Order/cancelOrder')}";
      GH.ajax ( url, {"id":id, "sid": sid}, function(data){
        GH.showMessage ( data.msg );
        ( data.error == 0 ) && ( window.location.reload() );
      }, "post" );
    };
    
  })();
</script>
</if>

<if condition="$order.order_status eq 4" >
<!-- 待确认收货时的状态  -->
<footer class="order-detail-pay pl10 pr10">
  <span>应付总额：￥{$order['goods_amount']+$order['shipping_fee']}</span>
  <button id="confirm-good" class="btn btn-orange" data-id="{$order.id}">确认收货</button>
</footer>
<script type="text/javascript">
  (function(){
    // 绑定确认收货事件
    var oConfirmBtn = document.getElementById ( "confirm-good" );
    if ( !oConfirmBtn ) { return; }
    oConfirmBtn.addEventListener ( "touchend", confirmGoodConfirm, false );
    
    // 是否确认收货
    function confirmGoodConfirm () {
      var _this = this;
      modal.confirm ({
        "title": "确认收货提示",
        "text": "请确认您已经收到商品",
        "callback": function() { confirmGood.apply( _this ) }
      })
    };
    
    // 确认收货
    function confirmGood () {
      var id = this.getAttribute ( "data-id" ),
          sid = {$sid};
      GH.ajax ( "__CONTROLLER__/signIn", {"id": id, "sid": sid}, function(data){
        GH.showMessage ( data.msg );
        ( data.error == 0 ) && ( window.location.reload() );
      });
    };
  })();
</script>
</if>

<script type="text/javascript">
  (function(){
    
    // 商品评价
    var orderGood = document.getElementById( "order-good" );
    GH.delegate( "touchend", orderGood, "a", function(){
      createEvaluate.apply( this );
    });
    
    // 创建评价模块
    function createEvaluate() {
      var oEvaluate = document.createElement( "section" ),
          overLay = document.createElement( "div" ),
          orderId = this.getAttribute( "data-order-id" ),
          goodId = this.getAttribute( "data-good-id" ),
          _this = this;
      oEvaluate.setAttribute( "class", "evaluate-lay" );
      overLay.setAttribute( "class", "modal-overlay" );
      var html = "<h4 class='title'>商品评价</h4>"
                +"<textarea placeholder='在此输入您的评价……'></textarea>"
                +"<div class='tr'><button class='btn btn-small btn-brown'>发送</button></div>";
      oEvaluate.innerHTML = html;
      
      document.body.appendChild( oEvaluate );
      document.body.appendChild( overLay );
      setTimeout(function(){
        overLay.classList.add( "modal-overlay-visible" )
      }, 0);
      
      overLay.addEventListener( "touchend", function(){
        document.body.removeChild( this );
        document.body.removeChild( oEvaluate );
      }, false );
      
      var oSendBtn = oEvaluate.querySelector( "button" ),
          oTxtArea = oEvaluate.querySelector( "textarea" );
      oSendBtn.addEventListener( "touchend", function(){
        sendEvaluate( orderId, goodId, oTxtArea, oEvaluate, _this, overLay ); 
      }, false );
    };
    
    // 发送评价
    function sendEvaluate(  orderId, goodId, oTxtArea, oEvaluate, oBtn, overLay ) {
      var sendData = { 'order_id' : orderId, rates : {} };
      sendData.rates[goodId] = {};
      sendData.rates[goodId]["content"] = oTxtArea.value;
      GH.ajax ( "{:U('Home/Rate/ratePost')}",  sendData, function( data ) {
        GH.showMessage ( data.msg );
        setTimeout(function(){
          document.body.removeChild( oEvaluate );
          document.body.removeChild( overLay );
        }, 300);
        if ( data.error == 0 ) {
          oBtn.innerHTML = "已评价";
          oBtn.className = "evaluate";
          oBtn.addEventListener( "touchend", function(ev){
            ev.preventDefault();
            ev.stopPropagation();
          }, false );
        };
      });
    };
  })();
</script>